<template>
  <div class="file-detail pd30">
    <el-dialog :visible.sync="visible">
      <div class="panelWrap container">
        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>电梯详细档案</div>
          <i class="el-icon-close m-r-20" @click="handleCloseDialog" />
        </div>
        <div class="main flex flextc m-t-40">
          <div class="d-left">
            <div class="d-row">
              <span class="name m-l-20">设备出厂编号：</span>
              <el-input v-model.trim="form.factoryNumber" readonly :title="form.factoryNumber" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">设备注册代码：</span>
              <el-input v-model.trim="form.registerCode" readonly :title="form.registerCode" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">设备品种：</span>
              <el-input v-model.trim="form.equipmentType" readonly :title="form.equipmentType" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">设备型号：</span>
              <el-input v-model.trim="form.equiModel" readonly :title="form.equiModel" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">设备安装地址：</span>
              <el-input v-model.trim="form.installAddress" readonly :title="form.installAddress" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">设备内部编号：</span>
              <el-input v-model.trim="form.interNumber" readonly :title="form.interNumber" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">设备制造商：</span>
              <el-input v-model.trim="form.manufacturer" readonly :title="form.manufacturer" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">进口设备代理商：</span>
              <el-input v-model.trim="form.agent" readonly :title="form.agent" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">设备出厂日期：</span>
              <el-input v-model.trim="form.dateProduction" readonly :title="form.dateProduction" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">设备改造单位：</span>
              <el-input v-model.trim="form.remakeUnit" readonly :title="form.remakeUnit" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">设备改造日期：</span>
              <el-input v-model.trim="form.modificationDate" readonly :title="form.modificationDate" class="dinput" />
            </div>

          </div>

          <div class="d-right">

            <div class="d-row">
              <span class="name m-l-20">设备安装单位：</span>
              <el-input v-model.trim="form.installUnit" readonly :title="form.installUnit" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">设备安装日期：</span>
              <el-input v-model.trim="form.installDate" readonly :title="form.installDate" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">维护保养单位：</span>
              <el-input v-model.trim="form.maintenanceUnitName" readonly :title="form.maintenanceUnitName" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">应急救援电话：</span>
              <el-input v-model.trim="form.emergencyCall" readonly :title="form.emergencyCall" class="dinput" />
            </div>

            <div class="d-row">
              <span class="name m-l-20">使用单位：</span>
              <el-input v-model.trim="form.useUnitName" readonly :title="form.useUnitName" class="dinput" />
            </div>

            <div class="dt-row flex m-l-60">
              <!-- <div class="dttitle">电梯</div> -->
              <div class="dtcont">
                <div class="dtbox">
                  <span class="dname m-l-20">层站数：</span>
                  <el-input v-model.trim="form.floorNumber" readonly :title="form.floorNumber" class="dtinput" />
                </div>

                <div class="dtbox">
                  <span class="dname m-l-20">额定速度：</span>
                  <el-input v-model.trim="form.ratedSpeed" readonly :title="form.ratedSpeed" class="dtinput" />
                </div>

                <div class="dtbox">
                  <span class="dname m-l-20">额定载重量：</span>
                  <el-input v-model.trim="form.ratedCapacity" readonly :title="form.ratedCapacity" class="dtinput" />
                </div>

                <div class="dtbox">
                  <span class="dname m-l-20">显示楼层：</span>
                  <el-input v-model.trim="form.showFloor" readonly :title="form.showFloor" class="dtinput" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Filedetail',
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      name: '',
      form: { ...this.form }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      this.form = { ...v }
    }
  },
  created() {},
  methods: {
    handleCloseDialog() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss">
@import "@/styles/public.scss";

.file-detail {
  .container {
    background: #ffffff;
    width: 900px;
    height: 780px;
    margin-left: -160px;
    margin-top: -60px;
    .main {
      margin-left: -60px;
      .d-row {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .name {
          width: 160px;
          text-align: right;
        }
        .dinput {
          width: 260px;
        }
      }
      .dt-row {
        // .dttitle {
        //   width: 20px;
        //   height: 260px;
        //   line-height: 100px;
        // }
        .dtcont {
          .dtbox {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .dname {
              width: 100px;
              text-align: right;
            }
            .dtinput {
              width: 260px;
            }
          }
        }
      }
    }
  }
}
</style>
